<template>
    <div class="payMessage">
        <el-row>
            <el-col :span="6">
                <el-card class="box-card">
                    <div class="paySearch">
                        <el-form :model="form" >
                            <el-form-item label="缴费人员" class="full-width">
                                <el-input v-model="form.username" @keyup.enter.native='_query' placeholder="输入缴费人员">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="缴费名称" class="full-width">
                                <el-input v-model="form.payname" @keyup.enter.native='_query'  placeholder="输入缴费项目/名称">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="支付类型" class="full-width">
                                <el-select v-model="form.costtype" placeholder="输入支付类型" clearable style="width:100%">
                                    <el-option v-for="item in typeList" :label="item.text" :key="item.value" :value="item.value" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="支付状态" class="full-width">
                                <el-select v-model="form.coststatus" placeholder="选择支付状态" clearable style="width:100%">
                                    <el-option v-for="item in statusList" :label="item.text" :key="item.value" :value="item.value" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="支付时间" class="full-width">
                                <el-date-picker
                                        v-model="form.costtime"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        style="width: 100%">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="缴费金额" class="full-width" >
                                <el-input v-model="form.paymoney" @keyup.enter.native='_query'  placeholder="输入缴费金额">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="缴费优先级" class="full-width" v-show="isHidden">
                                <el-input v-model="form.paylevel" @keyup.enter.native='_query'  placeholder="缴费优先级">
                                </el-input>
                            </el-form-item>
                            <div class="more-params">
                                <i v-if="!isHidden" class="fa fa-angle-double-down"></i>
                                <i v-if="isHidden" class="fa fa-angle-double-up"></i>
                                <span class="margin-left-5" @click="toggle">{{toggleText}}</span>
                            </div>
                            <el-form-item class="full-width">
                                <el-row :gutter=22>
                                    <el-col :span="12">
                                        <el-button type="primary" @click="reset" class="btn-sm color-gray btn-group">重置
                                        </el-button>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-button type="primary" @click="search" class="btn-sm btn-group">立即查询</el-button>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="18">
                <el-card class="box-card"
                         style="margin-left: 20px;">
                    <el-row>
                        <span class="list-title">缴费列表</span>
                        <el-button type="primary"
                                   size="small"
                                   style="float: right"
                                   icon="el-icon-download"
                                   @click="_exportProductValue">导出</el-button>
                    </el-row>
                    <div class="productListView">
                        <div v-loading="loading">
                            <div>
                                <!--table表格-->
                                <div style="margin: 15px 0 0 0;">
                                    <el-table :data="tableData" :stripe=true :fit=true height="470" v-loading="loading"  border
                                              :header-cell-style="{'background':'#eef1f6','color':'#1f2d3d','border-color':'#dfe6ec'}"
                                              style="width: 100%;font-size: 14px;color: #1f2d3d" element-loading-text="拼命加载中" empty-text="没有信息">
                                        <el-table-column prop="payname" label="缴费产品" show-overflow-tooltip align="left">
                                        </el-table-column>
                                        <el-table-column prop="username" label="缴费人员" :formatter="showFormatter" width="120" align="center">
                                        </el-table-column>
                                        <el-table-column prop="costtype" label="支付类型" :formatter="typeFormatter" width="110" align="center">
                                        </el-table-column>
                                        <el-table-column prop="paymoney" label="缴费金额" width="130" align="center">
                                        </el-table-column>
                                        <el-table-column prop="paylevel" label="缴费优先级" width="120" align="center">
                                        </el-table-column>
                                        <el-table-column prop="costtime" label="支付时间" :formatter="dateFormat" show-overflow-tooltip width="140" align="center">
                                        </el-table-column>
                                        <el-table-column prop="coststatus" label="支付状态" :formatter="statusFormatter" width="130" align="center">
                                        </el-table-column>
                                        <el-table-column label="操作" align="center" width="175" v-if="this.type === '1' ">
                                        <template slot-scope="scope">
                                            <div style="display: flex">
                                                <el-button :plain="true"
                                                           size="mini"
                                                           style="color: #62a8ea;background-color: #fff;font-size: 12px"
                                                           @click="detail(scope.row)"
                                                >查看</el-button>
                                                <el-button :plain="true"
                                                           size="mini"
                                                           style="background-color: #fff;font-size: 12px"
                                                           @click="_export(scope.row, scope.$index)"
                                                >导出</el-button>
                                                <el-button :plain="true"
                                                           size="mini"
                                                           style="font-size: 12px;color: black;background-color: #fff"
                                                           @click="deleteData(scope.row, scope.$index)"
                                                           type="danger">删除
                                                </el-button>
                                            </div>
                                        </template>
                                    </el-table-column>
                                        <el-table-column label="操作" align="center" width="175" v-else>
                                            <template slot-scope="scope">
                                                <div style="display: flex">
                                                    <el-button :plain="true"
                                                               :disabled="scope.row.username == name? false : true"
                                                               size="mini"
                                                               :type="buttonType(scope.row)"
                                                               style="font-size: 12px"
                                                               @click="pay(scope.row, scope.$index)">支付
                                                    </el-button>
                                                    <el-button :plain="true"
                                                               size="mini"
                                                               style="color: #62a8ea;background-color: #fff;font-size: 12px"
                                                               @click="detail(scope.row)"
                                                    >查看</el-button>
                                                    <el-button :plain="true"
                                                               :disabled="scope.row.username == name? false : true"
                                                               size="mini"
                                                               style="background-color: #fff;font-size: 12px"
                                                               @click="_export(scope.row, scope.$index)"
                                                    >导出</el-button>
                                                </div>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                                <div class="block">
                                    <el-pagination @current-change="handleCurrentChange"
                                                   layout="total, sizes,prev, pager, next"
                                                   :current-page.sync="iPagination.current"
                                                   :page-size='iPagination.pageSize'
                                                   :page-sizes="iPagination.pageSizeOptions"
                                                   :total="iPagination.total"
                                                   @size-change="handleSizeChange">
                                    </el-pagination>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import dateFunc from '@/utils/dateFunc'
    import moment from 'moment'
    import { export2Excel } from '@/utils/util'
    export default {
        name: "payInfo",
        data(){
            return{
                type: '',
                isPop:false,
                pathName: "",
                filterText: "",
                toggleText: '更多',
                emptyText: "请选择条件并点击查询",
                isHidden: false,
                catalogList: [], // 产品目录
                form:{
                    username: '',
                    payname: '',
                    costtype: '',
                    coststatus: '',
                    costtime: '',
                    // costtime:['',''],
                    paymoney: '',
                    paylevel: ''
                },
                name: '',
                typeList:[
                    {
                        value: 1,
                        text: '支付宝支付'
                    },
                    {
                        value: 2,
                        text: '微信支付'
                    },
                    {
                        value: 3,
                        text: '银联支付'
                    }
                ],
                statusList:[
                    {
                        value: 1,
                        text: '已支付'
                    },
                    {
                        value: 2,
                        text: '未支付'
                    }
                ],
                tableData:[],
                rows: [],
                columns:[{title:'缴费产品',key:'payname'}, {title:'缴费人员',key:'username'},
                    {title:'支付类型',key:'costtype'}, {title:'缴费金额',key:'paymoney'},
                    {title:'缴费优先级',key:'paylevel'},{title:'支付时间',key:'costtime'},
                    {title:'支付状态',key:'coststatus'}
                ],
                iPagination: {
                    current: 1,
                    pageSize: 10,
                    pageSizeOptions: [5, 10, 20, 50, 100],
                    total: 0,
                    "page": 0,
                    "pageSize": 10,
                },
                loading: false,
                status:{
                    1:'已支付',
                    2:'未支付'
                },
                typeObj:{
                    1:'支付宝支付',
                    2:'微信支付',
                    3:'银联支付'
                }
            }
        },
        computed:{
          // isNotUser(row){
          //     if (this.username == 'row.username'){
          //         return true
          //     } else {
          //         return false
          //     }
          // }
        },
        created(){
            // 判断管理员或是用户
            this.$axiosToken({
                url: '/users/getUserByToken',
                method: 'get',
                data: {},
                success:(result=>{
                    this.type = result.type
                    this.name = result.username
                })
            });
        },
        mounted(){
          this.getPayMessage()
        },
        methods:{
            buttonType(row) {
                // 根据用户改变按钮状态颜色
                if (row.username == this.name) {
                    return "danger"
                }
            },
            // 更多的显隐操作
            toggle(){
                this.isHidden = !this.isHidden;
                if (this.isHidden == false) {
                    this.toggleText='更多';
                }else {
                    this.toggleText='收起';
                }
            },
            // 分页导航
            handleCurrentChange (val) {
                this.iPagination.current = val;
                this.getPayMessage()
            },
            handleSizeChange (val) {
                this.iPagination.current = 1;
                this.iPagination.pageSize = val;
                this.getPayMessage()
            },
            // 查询
            search(){
                // 从第一次开始查询
                this.iPagination.current = 1;
                this.getPayMessage()
            },
            // 重置
            reset(){
                this.form={
                    username: '',
                    payname: '',
                    costtype: '',
                    coststatus: '',
                    costtime: '',
                    paymoney: '',
                    paylevel: ''
                }
                this.search()
            },
            getParams(){
                const params = {...this.form.costtime};
                console.log(params,33);
                params.startDate = dateFunc.format(params[0],'YYYY-MM-DD');
                params.endDate = dateFunc.format(params[1],'YYYY-MM-DD');
                this.$delete(params, 'costtime')
                let data = {
                    username: this.form.username,
                    payname: this.form.payname,
                    costtype: this.form.costtype,
                    coststatus: this.form.coststatus,
                    startDate: params.startDate,
                    endDate: params.endDate,
                    paymoney: this.form.paymoney,
                    paylevel: this.form.paylevel,
                    currPage: this.iPagination.current - 1,
                    pageNum: this.iPagination.pageSize,
                };
                for (let key in data) {
                    if (data[key] === '') {
                        delete data[key]
                    }
                }
                return data
            },
            // 获取支付列表
            getPayMessage(){
                let params = this.getParams();
                this.loading = true;
                // const params = {...this.form.costtime};
                // console.log(params,33);
                // params.startDate = dateFunc.format(params[0],'YYYY-MM-DD');
                // params.endDate = dateFunc.format(params[1],'YYYY-MM-DD');
                // this.$delete(params, 'costtime');
                this.$Axios({
                    url: '/cost/getPayMessage',
                    method: 'get',
                    // data:{
                    //     username: this.form.username,
                    //     payname: this.form.payname,
                    //     costtype: this.form.costtype,
                    //     coststatus: this.form.coststatus,
                    //     startDate: params.startDate,
                    //     endDate: params.endDate,
                    //     paymoney: this.form.paymoney,
                    //     paylevel: this.form.paylevel,
                    //     currPage: this.iPagination.current - 1,
                    //     pageNum: this.iPagination.pageSize,
                    // },
                    data: params,
                    success:(result)=>{
                        this.tableData = result.data;
                        this.iPagination.total = result.total;
                        setTimeout(() => {
                            this.loading = false;
                        }, 200);
                    }
                })
            },

            // 导出
            _exportProductValue(){
                this.$confirm('确认导出缴费列表?','提示',{
                    type: "warning"
                }).then(()=>{
                    export2Excel(this.columns,this.tableData)
                })
            },
            // 行内到处
            _export(row,index){
                let row1 = {
                    payname: row.payname,
                    username: row.username,
                    costtype: this.typeObj[row.costtype],
                    paymoney: row.paymoney,
                    paylevel: row.paylevel,
                    costtime: dateFunc.format(row.costtime,'YYYY-MM-DD HH:mm:ss'),
                    feedresult: row.feedresult,
                    coststatus: this.status[row.coststatus],
                };
                this.rows.push(row1);
                export2Excel(this.columns,this.rows)
            },

            // 查看
            detail(row){
                this.$router.push({
                    name: 'payDetail',
                    query:{
                        detailId: row.id
                    }
                })
            },

            // 普通用户情况---->支付
            pay(row,index){
                this.$router.push({
                    name:'userPay',
                    query:{
                        payId: row.id
                    }
                })
            },

            // 时间格式转化
            dateFormat(row,column) {
                var date = row[column.property];
                if(date == undefined){
                    return '暂无'
                }else {
                    return moment(date).format("YYYY-MM-DD HH:mm:ss")

                }
            },
            // 状态转为文字
            statusFormatter(row,column){
                const coststatus = row.coststatus
                if (coststatus == 1){
                    return '已支付'
                }else {
                    return '未支付'
                }
            },
            // 类型转为文字
            typeFormatter(row,column){
                const costtype = row.costtype;
                if (costtype == 1){
                    return '支付宝支付'
                }else if (costtype == 2) {
                    return '微信支付'
                }else if (costtype == 3){
                    return '银联支付'
                }else {
                    return '暂无'
                }
            },
            // 显示数据状态
            showFormatter(row,column){
                if (row.username == undefined){
                    return '暂无'
                }else {
                    return row.username
                }
            },

            // 删除
            deleteData(row,index){
                this.$confirm('确定删除该支付信息?','提示',{
                    type: "warning",
                }).then(()=>{
                    this.$axiosToken({
                        url: '/cost/delCostData',
                        method: 'get',
                        data:{id: row.id},
                        success: (result) =>{
                            this.$message({
                                message: '删除支付信息成功',
                                type: 'success',
                                duration: 2000
                            });
                            this.getPayMessage()
                        }
                    }).catch((reason)=>{
                        alert('删除失败'+reason)
                    })
                }).catch(()=>{
                    this.$message({
                        type: 'info',
                        message: '已取消删除该条支付信息',
                        duration: 2000
                    })
                })
            },



        }
    }
</script>

<style scoped>
    /*/deep/ .el-input__inner{*/
    /*    font-size: 14px;*/
    /*    height: 36px;*/
    /*}*/
    /deep/ .el-input__inner{
        font-size: 14px;
        height: 36px;
        background-color: #fff;
        border-radius: 4px;
        border: 1px solid #bfcbd9;
        box-sizing: border-box;
        color: #1f2d3d;
        /*font-size: inherit;*/
    }

    /deep/ .el-input.el-input--mini.el-input--suffix>.el-input__inner{
        height: 28px;
    }
    .box-card{
        /*border: 1px solid #eeeff2;*/
        height: 600px;
        overflow-y: scroll  ;
    }
    .paySearch{
        height: 100%;
    }
    .full-width {
        width: 100%;
        margin: 10px 0 10px 0;
    }
    .btn-sm {
        padding: 5px 10px;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 3px;
    }
    .btn-group {
        width: 100%;
    }

    .color-gray {
        color: #1a1919;
        background-color: #fafafa;
        border-color: #bec5ca;
    }
    .more-params{
        font-size: 14px;
        text-align: center;
        cursor: pointer;
        color: #89bceb;
    }
    .more-params:hover{
        color: #4e97d9;
    }
    .block{
        float: right;
        margin-top: 15px;
    }
    .list-title {
        display: inline-block;
        font-size: 1.5em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        font-weight: bold;
    }
    /deep/ .el-button--mini, .el-button--mini.is-round{
        height: 26px;
        width: 48px;
    }
    /deep/.el-button--mini, .el-button--mini.is-round {
        padding: 7px 10px;
        text-align: center;
    }
    /deep/ .el-button--mini, .el-button--small{
        border-radius: 4px;
    }




</style>